{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}
<!--下面 每个页面的特色css-->
{block name="titleStyle"} input{ width:100px; } .td2{ width:300px; } .td1{ width:80px; } #span1,#span2,#span3{ font-size:
10px; color: red; } {/block}

<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<form action="">
	<table border=0>
		<tr>
			<td class="td1">用户名</td>
			<td class="td2">
				<input type="text" name="username" />
				<span id="span1"></span>
			</td>
		</tr>
		<tr>
			<td>密码</td>
			<td>
				<input type="password" name="pwd1" />
				<span id="span2"></span>
			</td>
		</tr>
		<tr>
			<td>确认密码</td>
			<td>
				<input type="password" name="pwd2" />
				<span id="span3"></span>
			</td>
		</tr>
		<tr>
			<td>年龄</td>
			<td>
				<input type="text" name="age" />
			</td>
		</tr>
		<tr>
			<td>电邮</td>
			<td>
				<input type="text" name="email" />
			</td>
		</tr>
		<tr>
			<td>电话号码</td>
			<td>
				<input type="text" name="phone" />
			</td>
		</tr>
		<tr>
			<td>
				<input type="submit" onclick="return checkinfo()" value="注册新用户" />
			</td>
			<td>
				<input type="reset" value="重来" />
			</td>
		</tr>
		</table>
		<h6>代码</h6>
		<pre>

				css 部分
				input{
					width:100px;
					}
				.td2{
					width:300px;
					}	
				.td1{
					width:80px;
				}
				
				#span1,#span2,#span3{
					font-size: 10px;
					color: red;
				}
				
				页面
				
				&lt;form action=""&gt;
						&lt;table border=0&gt;
						&lt;tr&gt;&lt;td class="td1"&gt;用户名&lt;/td&gt;&lt;td class="td2"&gt;&lt;input type="text" name="username" /&gt;&lt;span id="span1"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
						&lt;tr&gt;&lt;td&gt;密码&lt;/td&gt;&lt;td&gt;&lt;input type="password" name="pwd1" /&gt;&lt;span id="span2"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
						&lt;tr&gt;&lt;td&gt;确认密码&lt;/td&gt;&lt;td&gt;&lt;input type="password" name="pwd2" /&gt;&lt;span id="span3"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
						&lt;tr&gt;&lt;td&gt;年龄&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="age" /&gt;&lt;/td&gt;&lt;/tr&gt;
						&lt;tr&gt;&lt;td&gt;电邮&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="email" /&gt;&lt;/td&gt;&lt;/tr&gt;
						&lt;tr&gt;&lt;td&gt;电话号码&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="phone" /&gt;&lt;/td&gt;&lt;/tr&gt;
						&lt;tr&gt;&lt;td&gt;&lt;input type="submit" onclick="return checkinfo()" value="注册新用户" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="reset" value="重来" /&gt;&lt;/td&gt;&lt;/tr&gt;
				
				 js
				
					 &lt;script language="javascript"&gt;
							function checkinfo() {
								span1.innerText = "";
								span2.innerText = "";
								span3.innerText = "";
								//表单用户名
								if (document.forms[0].username.value.length &lt; 4 || document.forms[0].username.value.length &gt; 6) {
									span1.innerText = "用户名应在4-6位间";
									return false;
								}
								//注意两个if之间的关系
								if (document.forms[0].pwd1.value.length &lt;= 3) {
									span2.innerText = "密码要大于3位";
									return false;
								}
								if (document.forms[0].pwd2.value != document.forms[0].pwd1.value) {
									span3.innerText = "两次输入的密码不相同";
									return false;
								}
							}
						&lt;/script&gt;   

	 </pre> {/block}
		<!--底部js 在这里是js的实际代码区-->
		{block name="footjs"}
		<script language="javascript">
			function checkinfo() {
				span1.innerText = "";
				span2.innerText = "";
				span3.innerText = "";
				//表单用户名
				if (document.forms[0].username.value.length < 4 || document.forms[0].username.value.length > 6) {
					span1.innerText = "用户名应在4-6位间";
					return false;
				}
				//注意两个if之间的关系
				if (document.forms[0].pwd1.value.length <= 3) {
					span2.innerText = "密码要大于3位";
					return false;
				}
				if (document.forms[0].pwd2.value != document.forms[0].pwd1.value) {
					span3.innerText = "两次输入的密码不相同";
					return false;
				}
			}
		</script> {/block}